<template>
  <div class="show_schedule">
<!--    <router-link to="/Schedule/addSchedule"><div class="add_schedule"></div></router-link>-->
<!--    <div v-for="schedule in schedules" :key="schedule.id" class="single_schedule">-->
<!--      <router-link class="turn" :to="'/Schedule' + schedule.id">-->
<!--        <div class="degree">{{schedule.degree}}</div>-->
<!--        <div class="content">{{schedule.body}}</div>-->
<!--      </router-link>-->
    <router-link to="/Schedule/addSchedule"><div class="add_schedule"></div></router-link>
      <div class="panel panel-primary" v-for="schedule in schedules" :key="schedule.id">

        <div class="panel-heading" >

          <h3 class="panel-title">{{schedule.degree}}</h3>

        </div>
        <router-link class="turn" :to="'/Schedule' + schedule.id">
        <div class="content">{{schedule.body}}</div>
          <div class="content_time">时间：{{schedule.time}}</div>
        </router-link>
      </div>
  </div>
</template>
<script>
export default {
  name: 'Center',
  data () {
    return {
      schedules: []
    }
  },
  created () {
    this.$http.get('http://localhost:3000/schedule/')
      .then(function (data) {
        this.schedules = data.body
      })
  }
}
</script>

<style scoped>
  .show_schedule{
    margin: 0 20px;
  }
  .content{
    padding: 20px;
    margin: 10px;
    color: black;
  }
  .add_schedule{
    font-size: 16px;
    padding-bottom:30px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    background-image: url('../../assets/icons/加号.png');
    background-repeat: no-repeat;
    background-position: 98% 50%;
    background-size: 31px 31px;
  }
  .content_time{
    padding: 20px;
    margin: 10px;
    color: #428eda;
  }
</style>
